<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新闻列表</title>
    <style>
        /* 准备工作 */
        /* 清除默认样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        /* 清除列表图标 */
        li {
            list-style: none;
        }
        /* 清除a标签的超文本的下划线 */
        a {
            text-decoration: none;
        }



        .news {
            /* 构建新闻区域大盒子 */
            width: 360px;
            height: 200px;
            background-color: #fff;

            /* 版心居中 */
            margin: 100px auto;
        }



        /* 新闻区域头部 */
        .news .hd {
            /* 头部的盒子 */
            height: 34px;
            background-color: #eee;

            /* 头部边框线调整 */
            border: 1px solid #dbdee1;
            border-left: 0;
        }

        .news .hd a {
            /* a标签盒子，及其背景颜色 */
            display: block;
            width: 48px;
            height: 34px;
            background-color: #fff;

            /* 美化边框线 */
            border-top: 3px solid #ff8400;
            border-right: 1px solid #dbdee1;

            /* -1盒子向上移动一个像素，抵消父级加的一个像素的边框线 */
            margin: -1px;

            /* 文字属性美化 */
            font-size: 14px;
            color: #333;
            text-align: center;
            line-height: 32px;
        }



        /* 新闻区域主体部分 */
        /* 主体部分内边距5px */
        .news .bd {
              padding: 5px;
        }

        /* 主体部分li标签内容 */
        .news .bd li {
            /* 背景图美化 */
            background-image: url(./images/square.png);
            background-repeat: no-repeat;
            background-position: 0 center;

            /* 内边距调整 */
            padding-left: 15px;
        }

        /* 主体部分a标签内容 */
        .news .bd a {
            /* 背景图美化 */
            background: url(./images/img.gif) no-repeat 0 center ;

            /* 内边距调整 */
            padding-left: 20px;

            /* 文字属性美化 */
            font-size: 12px;
            color: #666;

            /* 调整行高 */
            line-height: 24px;
        }




        /* 鼠标悬停:伪类选择器 */
        .news .bd a:hover {
            color: #ff8400;
        }


    </style>
</head>
<body>
    <!-- 新闻区域，包含标题+内容 -->
    <div class="news">
        <div class="hd">
            <a href="#">新闻</a>
        </div>
        <div class="bd">
            <li><a href="#">点赞“新农人” 温暖的伸手</a></li>
            <li><a href="#">在希望的田野上...</a></li>
            <li><a href="#">“中国天眼”又有新发现 已在《自然》杂志发表</a></li>
            <li><a href="#">急！这个领域，缺人！月薪4万元还不好招！啥情况？</a></li>
            <li><a href="#">G9“带货”背后：亏损面持续扩大，竞争环境激烈</a></li>
            <li><a href="#">多地力推二手房“带押过户”，有什么好处？</a></li>
        </div>

    </div>
</body>
</html>